{% extends "layout/enter.html" %}
{% load static %}
{% block title %}登录{% endblock %}

{% block content %}
<main class=" w-100 m-auto">
    <form method="post" style="width: 400px; margin: 0 auto" class="">
        {% csrf_token %}
        <h1 class="h3 mb-3 fw-normal" style="text-align: center;">用户登录</h1>

        <div class="form-floating" style="margin:20px 0">
            {{ form.usermail }}
            <label for="floatingInput">邮箱</label>
        </div>

        <div class="form-floating password-field" style="margin:20px 0; position: relative;">
            {{ form.password }}
            <label for="{{ form.password.id_for_label }}">密码</label>
            <span class="toggle-password" onclick="togglePassword(this)">
            </span>
            <span style="color: red;position: absolute;font-size: 14px">{{ form.password.errors.0 }}</span>
        </div>

        <div>
            <div class="form-floating" style="width: 120px;float: left; ">
                {{ form.code }}
                <label for="floatingPassword">验证码</label>
                <span style="color: red;position: absolute;font-size:14px">{{ form.code.errors.0 }}</span>
            </div>
            <div style=" margin: 17px 20px;float: left;">
                {% comment %} <img id="image_code" src="{% static 'img\login-img\code.jpg' %}" style="width: 100px;height: 40px;"> {% endcomment %}
                <img id="image_code" src="/image/code/" style="width: 100px;height: 40px;">
            </div>
            <a href="#" id="a_code" style="display: inline-block; vertical-align: middle;margin: 20px 0px 0px 0;" onclick="jump();">看不清?换一张图片</a>


        </div>
        <div class="form-check text-start my-3" style="clear: both;">
            <input class="form-check-input" type="checkbox" value="remember-me" id="checkDefault">
            <label class="form-check-label" for="checkDefault">
                记住我
            </label>
            <label style="margin: 0 0 0 210px;">
                没有账户？<a href="/register/">注册</a>
            </label>
        </div>
        <div class="form-check text-start my-3">
            <label style="float: right;">
                <a href="/forgot/password/">忘记密码?</a>
            </label>
        </div>
        <button class="btn btn-primary w-100 py-2" type="submit">登录</button>

        <p class="mt-5 mb-3 text-body-secondary">&copy; 2025</p>
    </form>
</main>
{% endblock %}

{% block js %}
    <script type="text/javascript">
    // 利用JavaScript点击刷新    

    // 刷新验证码图片
    function refreshCaptcha() {
        const img = document.getElementById('image_code');
        // 添加随机参数防止缓存
        img.src = '/image/code/?t=' + new Date().getTime();
    }

    // 绑定点击事件
    document.getElementById('a_code').addEventListener('click', function(e) {
        refreshCaptcha();  // 刷新验证码
    });

    // 页面加载时初始化验证码
    window.onload = function() {
        refreshCaptcha();
    };
    </script>
    
    <script>

    </script>
{% endblock %}
